<template>
	<div class="login-captcha" @click="refresh">
		<div v-if="svg" class="svg" v-html="svg"></div>
		<img v-else class="base64" :src="base64" alt=""/>
	</div>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
	name: 'login-captcha',
	props: {
		msg: String
	},
	data() {
		return {
			base64: '',
			svg: ''
		}
	},
	created() {
		this.refresh()
	},
	methods:{
		refresh() {
			this.$API.gdshop.open.captcha({
				height: 36,
				width: 110
			}).then((res) => {
				if (res.code !== 0) {
					ElMessage.error(res.message);
					return
				}
				if (res.data.img.includes(";base64,")) {
					this.base64 = res.data.img;
				} else {
					this.svg = res.data.img;
				}
				this.$emit('update:modelValue',res.data.captchaId)
			}).catch((err) => {
				console.log(err)
				ElMessage.error(err);
			});
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.login-captcha {
	height: 36px;
	cursor: pointer;
	background-color: #4e535a;

	.svg {
		height: 100%;
	}

	.base64 {
		height: 100%;
	}
}
</style>
